import React from 'react';
import { connect, routerRedux } from 'dva';
import headerPng from '../../../../../assets/busi/OperatePlatform/header_bg.png';
import { Spin, Carousel } from 'antd';
import moment from 'moment';
import NoData from '../component/NoData';
import PropTypes from 'prop-types';
import styles from '../index.less';
class Comp extends React.Component {
  static defaultProps = {
    title: '', //头部名字
    hasMore: false, //是否有更多的点击效果
    slideArr: null, //轮播数据
    backgroundColor: '#fff', //背景色  默认是白色
    click: () => {}, // 抛出点击事件
    refs: 'swiperContainer', //轮播的容器名字！必须
    refsPag: 'swiper-pagination', //可以不传递，轮播的容器的分页器
  };
  //当日回售点击更多跳转
  moreFn = () => {
    const { dispatch } = this.props;
    //回售登记提醒
    let params = {
      startTime: moment().format('YYYY-MM-DD'),
      endTime: moment().format('YYYY-MM-DD'),
    };
    sessionStorage.setItem('workPlaceResale', JSON.stringify(params));
    dispatch(routerRedux.push(`/OperatePlatform/BackSellRegister`));
  };
  render() {
    const { title, hasMore, slideArr, refs, refsPag, loading } = this.props;
    let initStatus = !!slideArr;
    return (
      <div className={styles.bcg}>
        <div className={styles.ResaleHeader} style={{ backgroundImage: `url(${headerPng})` }}>
          <span className={styles.titles}>{title}</span>
          {hasMore ? (
            <span className={styles.moreTitle} onClick={this.moreFn}>
              更多 >
            </span>
          ) : (
            ''
          )}
        </div>
        <Spin spinning={loading} tip='加载中...'>
          <div className={styles.ResaleWrap}>
            {!loading && initStatus ? (
              slideArr?.length ? (
                <div className={refs}>
                  <Carousel autoplay autoplaySpeed={4000}>
                    {slideArr.length &&
                      slideArr.map((item, index) => {
                        return (
                          <div className='swiper-slide' key={item.id}>
                            <div className={styles.swiperInfoWarn}>
                              <div style={{ fontSize: '14px', color: 'rgba(0, 0, 0, 0.65)', fontWeight: '400' }} title={item.name}>
                                {item.name}
                              </div>
                              <div style={{ fontSize: '14px', color: 'rgba(0, 0, 0, 0.65)', fontWeight: '400' }} title={item.code}>
                                {item.code}
                              </div>
                            </div>
                          </div>
                        );
                      })}
                  </Carousel>
                </div>
              ) : (
                <NoData title='暂无数据' />
              )
            ) : (
              <div style={{ height: '100%', width: '100%' }}></div>
            )}
          </div>
        </Spin>
      </div>
    );
  }
}
Comp.propsTypes = {
  refs: PropTypes.string, //容器的名字
  title: PropTypes.string, //头部名称
  hasMore: PropTypes.bool, //布尔值
  slideArr: PropTypes.array,
  backgroundColor: PropTypes.string, //背景色  默认是白色
  click: PropTypes.func,
};
export default connect()(Comp);
